<template>
  <div class="order-list-contain">
      <!-- <the-header></the-header> -->
      <div class="router">

      <div class="order-list">


        <el-tabs v-model="activeName" @tab-click="changeStatus">
            <el-tab-pane label="全部" name="0"><order-table></order-table></el-tab-pane>
            <el-tab-pane label="待支付" name="1"><order-table></order-table></el-tab-pane>
            <el-tab-pane label="待发货" name="2"><order-table></order-table></el-tab-pane>
            <el-tab-pane label="待收货" name="3"><order-table></order-table></el-tab-pane>
            <el-tab-pane label="待评价" name="4"><order-table></order-table></el-tab-pane>
            <el-tab-pane label="已完成" name="5"><order-table></order-table></el-tab-pane>
        </el-tabs>
      </div>
      </div>


      
    <router-view></router-view>


  </div>
    
</template>

<script>
import TheHeader from "@/components/TheHeader";
import OrderTable from "./OrderTable";

export default {
  components: {
    "the-header": TheHeader,
    "order-table": OrderTable
  },
  data() {
    return {
      activeName: "0"
    };
  },
  methods: {
    changeStatus(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="less">
// body{
//   overflow-y: auto;
// }
.order-list-contain {
  // &,
  // body {
  //   overflow: auto;
  //   height: 100%;
  // }

  .order-list {
    width: 980px;
    margin: 30px auto 0 auto;
    // height: 300px;
    // overflow: hidden;
  }
}
</style>

